<template>
    <image :src="$src" :style="$style" class="img" :mode="mode" @error="$emit('error')" @load="$emit('load')" />
</template>
<script>
import $ from '@/common'
export default {
    props: {
        src: String, width: String, height: String,
        mode: {
            type: String,
            default: 'aspectFit'
        }
    },
    computed: {
        $src() {
            let res = $.$img(this.src)
            if (this.src.includes('/upload/')) {
                res = $.domain + this.src
            } else if (this.src.includes('https://') || this.src.includes('http://')) {
                res = this.src
            }
            return res
        },
        $style() {
            let res = ''
            if (this.height) {
                res = `width:${this.width}rpx; height:${this.height}rpx;`
                if (this.height.endsWith('vw') || this.height.endsWith('vh') || this.height.endsWith('rem')) {
                    res = `width:${this.width}; height:${this.height};`
                }
            } else {
                res = `width:${this.width}rpx;`
                if (this.height.endsWith('vw') || this.height.endsWith('vh') || this.height.endsWith('rem')) {
                    res = `width:${this.width};`
                }
            }
            return res
        }
    }
}
</script>